<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
<div class="nav">
    五子棋对战
</div>
<div class="container">
    <div>
        <!--展示用户信息   -->
        <div id="screen"></div>

        <!--匹配按钮  -->
        <button id="match-button">开始匹配</button>


    </div>
</div>
<script src="./js/jquery.min.js"></script>
<script>
    $.ajax({
        method: 'get',
        url: '/getUserInfo',
        success: function (data) {
            let screen = document.querySelector('#screen');
            screen.innerHTML = '玩家: ' + data.username + '<br>分数: ' +
                data.score + "<br> ⽐赛场次: " + data.totalCount + "<br>获胜场次: " +
                data.winCount;
        },
        error: function () {
            alert("获取用户信息失败")
        }
    });


    // 1. 和服务器建⽴连接
    let webSocketUrl = "ws://" + location.host + "/findMatch";
    let websocket = new WebSocket(webSocketUrl);
    // 2. 点击开始匹配
    let button = document.querySelector('#match-button');


    websocket.onopen = function () {
        console.log("连接成功");
    }
    websocket.onclose = function () {
        console.log("连接关闭");
    }
    websocket.onerror = function () {
        console.log("连接异常");
    }


    button.onclick = function () {
        if (websocket.readyState === websocket.OPEN) {
            if (button.innerHTML === '开始匹配') {
                console.log('开始匹配!');
                websocket.send(JSON.stringify(
                    {
                        message: 'startMatch',
                    }
                ));
            } else if (button.innerHTML === '匹配中...(点击取消)') {

                console.log('取消匹配!');
                websocket.send(JSON.stringify(
                    {
                        message: 'stopMatch'
                    }
                ));
            }
        } else {
            alert('当前您连接断开! 请重新登录!');
            location.replace('/login.html');
        }
    }

    // 3. 处理服务器的响应
    websocket.onmessage = function (e) {
        let resp = JSON.parse(e.data)
        if (!resp.ok) {
            console.log('游戏⼤厅中发⽣错误: ' + resp.reason);
            location.replace('/login.html');
            return;
        }
        if (resp.message === 'startMatch') {
            console.log('进⼊匹配队列成功!');
            button.innerHTML = '匹配中...(点击取消)';
        } else if (resp.message === 'stopMatch') {
            console.log('离开匹配队列成功!');
            button.innerHTML = '开始匹配';
        } else if (resp.message === 'matchSuccess') {
            console.log('匹配成功! 马上进⼊游戏⻚⾯!');
            location.replace('/game_room.html');
        } else if (resp.message === "repeatConnection") {
            alert("检测到多开")
            //location.assign("/login.html")
            location.replace("/login.html");
        } else {
            console.log('⾮法的 message: ' + resp.message);
        }
    }

    // 4. 监听窗⼝关闭事件，当窗⼝关闭时，主动去关闭websocket连接，防⽌连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

</script>

</body>
</html>